define(['template/mobile/edit', 'wx.tpl'], function(tpl, wx) {

  var data = {};
  var id_index = 0;
  var ani_index = 0;
  var cur_parent = null;
  //var cur_parent_index = 0;//当前动画编辑环境序号

  var anistyle = [
    'undefined',
    'fadeIn', ['fadeInLeft', 'fadeInDown', 'fadeInRight', 'fadeInUp'],
    ['bounceInLeft', 'bounceInDown', 'bounceInRight', 'bounceInUp'],
    'bounceIn',
    'zoomIn',
    'rollIn',
    'lightSpeedIn',
    'wobble',
    'rubberBand',
    'rotateIn',
    'flip',
    'swing',
    'fadeOut',
    'flipOutY',
    'yunsuRotate', ['zoomInLeft', 'zoomInDown', 'zoomInRight', 'zoomInUp'],
    ['zoomOutRight', 'zoomOutDown', 'zoomOutLeft', 'zoomOutUp'],
  ];

  function init($ele) { //ani = [val,c_val,durtime,delaytime,]
    var ani_name = '';
    data = $ele.data('info');
    setAniEditBox($ele);
    $('#Js-anitpl').delegate('.Js-ani-select', 'change', function(event) {
      var cur_parent_index = parseInt($(this).parents('.Js-panel').attr("data-index"));
      cur_parent = $(this).parents('ul');
      cur_parent.find('.Js-direct-selected').hide();

      cur_parent.find('.Js-li-time').show();
      cur_parent.find('.Js-li-delay').show();
      cur_parent.find('.Js-li-num').show();

      data.ani[cur_parent_index].val = ani_index = $(this).find('option:selected').val();
      ani_name = anistyle[ani_index];

      if (ani_index == 0) {
        cur_parent.find('.Js-li-time').hide();
        cur_parent.find('.Js-li-delay').hide();
        cur_parent.find('.Js-li-num').hide();
      } else if (ani_index == 2 || ani_index == 3 || ani_index == 16 || ani_index == 17) {
        var child_ani_index = $('.Js-direct-selected').find('option:selected').val();
        ani_name = anistyle[ani_index][child_ani_index];
        data.ani[cur_parent_index].c_val = child_ani_index;
        cur_parent.find('.Js-direct-selected').show();
      } else if (ani_index == 15) {
        data.ani[cur_parent_index].anitimfn = "linear";
      }
      setAni(ani_name, $ele, cur_parent_index);
    });

    //二级selected框 选择方向
    $('#Js-anitpl').delegate('.Js-direct-selected', 'change', function(event) {
      var c_val = $(this).find('option:selected').val();
      var index = parseInt($(this).parents('.Js-panel').attr("data-index"));
      data.ani[index].c_val = c_val;
      var ani_name = anistyle[ani_index][c_val];
      setAni(ani_name, $ele, index);
    });

    //循环次数
    $('#Js-anitpl').delegate('.Js-loop-times', 'change', function() {
      var index = parseInt($(this).parents('.Js-panel').attr("data-index"));
      data.ani[index].lptimes = $(this).val();
    });
    //是否循环
    $('#Js-anitpl').delegate('.xunhuan', 'change', function() {
      var index = parseInt($(this).parents('.Js-panel').attr("data-index"));
      if ($(this).prop('checked')) {
        data.ani[index].lptimes = 'infinite';
        $(this).prev().prop('disabled', true);
      } else {
        $(this).prev().prop('disabled', false);
        data.ani[index].lptimes = $(this).prev().val();
      }

    });


    $('.broad-anim').on('click', function() {
      aniSequence($ele);
    });
    $('.add-anims').on('click', function() {
      id_index++;
      $('#Js-anitpl').append(wx.tpl(tpl.ani, {
        accordion: id_index,
        head: id_index,
        collapse: id_index,
        title: id_index,
        index: id_index - 1
      }));
      data.ani.push({
        aniname: undefined,
        val: 0,
        c_val: null,
        durtime: 2,
        delaytime: 0,
        lptimes: 1,
        anifimd: "both",
        anitimfn: "ease"
      });
      rangeChange($ele);

    });
    $('#Js-anitpl').delegate('.Js-delete-ani', 'click', function(evt) {
      evt.stopPropagation();
      var p_index = parseInt($(this).parents('.Js-panel').attr("data-index"));
      data.ani.splice(p_index, 1);
      //删除之后保存数据
      $ele.data('info', data);
      setAniEditBox($ele);
      $(this).parents('.panel-group').remove();
    });
  }

  function setAni(aniname, $ele, index) {
    if (!aniname) return;
    var durtime = cur_parent.find('.Js-durtime').val() != 0 ? cur_parent.find('.Js-durtime').val() : 2;
    var delaytime = cur_parent.find('.Js-delaytime').val() != 0 ? cur_parent.find('.Js-delaytime').val() : 0;
    if (cur_parent.find('.xunhuan').prop('checked')) {
      var lptimes = "infinite";
    } else {
      var lptimes = cur_parent.find('.Js-loop-times').val();
    }
    data.ani[index].durtime = durtime;
    data.ani[index].delaytime = delaytime;
    data.ani[index].lptimes = lptimes;
    data.ani[index].aniname = aniname;
    $ele.css('animation', 'none');
    setTimeout(
      function() {
        $ele.css('animation', aniname + ' ' + durtime + 's ' + data.ani[index].anitimfn + ' ' + delaytime + 's ' + data.ani[index].anifimd + ' ' + lptimes);
      }, 0);
    $ele.data('info', data);
  }
  //删除之后重新排序
  function setAniEditBox($ele) {
    $('#Js-anitpl').html("");
    for (var i = 0; i < data.ani.length; i++) {
      $('#Js-anitpl').append(wx.tpl(tpl.ani, {
        accordion: (i + 1),
        head: (i + 1),
        collapse: (i + 1),
        title: (i + 1),
        index: i
      }));


      $('#acc_' + (i + 1) + ' .Js-ani-select').find('option[value="' + data.ani[i].val + '"]').prop("selected", true);
      if (data.ani[i].val != 0) {
        var acc_id = $('#acc_' + (i + 1));
        $('.Js-li-time', acc_id).show();
        $('.Js-li-delay', acc_id).show();
        $('.Js-li-num', acc_id).show();
        $('.Js-durtime', acc_id).val(data.ani[i].durtime);
        $('.Js-delaytime', acc_id).val(data.ani[i].delaytime);
        $('.Js-li-time', acc_id).find('input[type="range"]').val(data.ani[i].durtime); //prop('value', data.ani[i].durtime);
        $('.Js-li-delay', acc_id).find('input[type="range"]').val(data.ani[i].delaytime);

        if (data.ani[i].lptimes == 'infinite') {
          $('.xunhuan', acc_id).prop('checked', true);
          $('.xunhuan', acc_id).prev().prop('disabled', true);
        } else {
          $('.xunhuan', acc_id).prop('checked', false);
          $('.xunhuan', acc_id).prev().prop('disabled', false);
          $('.Js-loop-times', acc_id).val(data.ani[i].lptimes);
        }

        if (data.ani[i].val == 2 || data.ani[i].val == 3 || data.ani[i].val == 16 || data.ani[i].val == 17) {
          $('.Js-direct-selected', acc_id).find('option[value="' + data.ani[i].c_val + '"]').prop("selected", true);
          $('.Js-direct-selected', acc_id).show();
        }
      }
      rangeChange($ele);
    }
    id_index = data.ani.length;
  }

  function rangeChange($ele) {
    $('#Js-anitpl .Js-setting-range').on('rangeChange', function(event, value) {
      var index = parseInt($(this).parents('.Js-panel').attr("data-index"));

      if ($(this).find('.Js-delaytime').length == 0) {
        data.ani[index].durtime = value;
      } else {
        data.ani[index].delaytime = value;
      }
      $ele.data('info', data);
    });
  }

  function aniSequence($ele) {
    $ele.css('animation', '');
    var aniSq = $ele.data('info').ani;
    var i = 0;
    var lptimes;

    if (aniSq[i].lptimes == "infinite" && aniSq[i].length > 1) {
      lptimes = 1;
    } else {
      lptimes = aniSq[i].lptimes;
    }
    setTimeout(
      function() {
        $ele.css('animation', aniSq[i].aniname + ' ' + aniSq[i].durtime + 's ' + aniSq[i].anitimfn + ' ' + aniSq[i].delaytime + 's ' + aniSq[i].anifimd + ' ' + lptimes);
      }, 0.1);
    $ele.context.addEventListener("animationend", function() { //动画结束时事件
      i++;

      if (i >= aniSq.length) {
        $ele.context.removeEventListener("animationend");
        return;
      }

      if (aniSq[i].lptimes == "infinite") {
        lptimes = 1;
      } else {
        lptimes = aniSq[i].lptimes;
      }
      $ele.css('animation', '');
      setTimeout(
        function() {
          $ele.css('animation', aniSq[i].aniname + ' ' + aniSq[i].durtime + 's ' + aniSq[i].anitimfn + ' ' + aniSq[i].delaytime + 's ' + aniSq[i].anifimd + ' ' + lptimes);
        }, 0.1);
    });

  }

  return init;
});
